'use client';
import React from 'react';
import { Codeblock } from './codeblock';

const codeBlock = `
import { ReactQueryClientProvider, ReactQueryContainer } from '@pvfhv/react-query-extend';
import { useQuery } from '@tanstack/react-query';

const SomeComponent = () => {
  const [multiple] = React.useState(false);
  const result1 = useQuery({
    queryKey: ['example'],
    queryFn: () => fetch('https://...').then(res => res.json())
  })
  
  const result2 = useQuery({
    queryKey: ['example'],
    queryFn: () => fetch('https://...').then(res => res.json())
  })
  
  // 支持一个或多个result
  return (
    <ReactQueryContainer result={multiple ? [result1, result2] : result1}>
      <div>
        使用{result1.data}数据渲染的组件
      </div>
    </ReactQueryContainer>
  )
}

const AppEntry = () => {
  
     
  return (
    <ReactQueryClientProvider position="bottom">
      <SommeComponent />
    </ReactQueryClientProvider>
  );
}
`;

export const UsageSection = () => {
  return (
    <div className="w-full flex flex-col gap-3">
      <p className="font-medium text-lg">Usage</p>
      <Codeblock code={codeBlock} />
    </div>
  );
};
